<script setup>
const props = defineProps({
  data: {
    type: Array,
    default: [],
  },
})


const getView = computed(()=>{

  if(Array.isArray(props.data) && props.data?.length>0){
    return props.data.map(t => `${t.auxiliaryProperties} : ${t.auxiliaryValue}`).join(',')
  }else{
    return '暂无属性'
  }
})


</script>

<template>
  <el-popover trigger="hover" placement="top" width="400">
    <div class="title">当前物料的辅助属性</div>
    <p v-for="item in data" :key="item.auxiliaryId">
      <div class="text">{{ item.auxiliaryProperties }}</div>
      <div class="text">
        <span>{{ item.auxiliaryValue }}</span>
      </div>
    </p>

    <el-empty v-if="data?.length <= 0" :image-size="50" />
    <template #reference>
      <div class="textHover">{{getView}}</div>
    </template>
  </el-popover>
</template>
<style scoped lang="scss">
p {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title {
  font-size: 0.875rem;
}
.text{
  flex:1;
  text-align: left;
}
.textHover{
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
}
</style>
